"use client"
import Content from '@/app/clients/page'
import styles from './page.module.scss'
import { useEffect, useState } from 'react';
import Modal from './components/Modal'
export default function NewsCenter() {
  const data = JSON.parse(localStorage.getItem('userInfo') || '{}')
  const [userInfo, setUserInfo] = useState(data);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [imageUrl, setImageUrl] = useState(userInfo.picture);
  return (
    <Content>
      <div className={styles['Personal']}>
        <div className={styles['main']}>
          <div className={styles["img"]}>
            <img src={userInfo.picture?userInfo.picture:'/imgs/picture.jpg'} alt="" width='100%' height='100%' />
          </div>
          <table className={styles["right"]}>
            <tbody>
              <tr>
                <td>用户名:<span>&nbsp;{userInfo.name}</span></td>
                <td>手机号码:<span>&nbsp;{userInfo.phone}</span></td>
                <td>身份证号:<span>&nbsp;{userInfo.idCard}</span></td>
              </tr>
              <tr>
                <td>累计租赁天数:<span>&nbsp;{userInfo.lastRentDays}</span></td>
                <td>信用积分:<span>&nbsp;{userInfo.creditScore}</span></td>
                {userInfo.type === '个人' ? <td></td> : <td>企业名称:<span>&nbsp;{userInfo.companyName}</span></td>}
              </tr>
            </tbody>
          </table>
          <button className={styles["upd"]} onClick={() => { setIsModalOpen(true) }}>编辑个人信息</button>
        </div>
        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} userInfo={userInfo} setUserInfo={setUserInfo} imageUrlOld={imageUrl} setImageUrlOld={setImageUrl} />
      </div>
    </Content>
  );
}
